<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="yes" name="apple-touch-fullscreen" />
        <meta content="telephone=no,email=no" name="format-detection" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <title>签纸贺兑换</title>

        <link rel="stylesheet" href="css/reset.css" media="screen" title="no title">
        <link rel="stylesheet" href="css/invoices.css" media="screen" title="no title">
        <script src="js/flexible.js" ></script>
        <script src="js/jquery-2.1.3.min.js" ></script>
        <script src="js/cleave.min.js"></script>
        <script src="js/util.js"></script>
        <script src="js/vue.min.js"></script>

    </head>
    <body >
        <div id="exchange_page" class="exchange-page"  v-cloak>
          
            <!-- 头部栏 -->
            <div class="title-bar" >
                <div class="left-img" id="back">
                    <img src="img/jt_l.png" alt="">
                </div>
                <div class="title" >
                   签纸贺兑换
                </div>
                
            </div>
            <div class="main-content" v-if="exchangeGoods.length >0 ">
                <div class="ball-container">
                    <div v-for="ball in balls">
                        <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
                            <div class="ball"  v-show="ball.show">
                                <div class="inner inner-hook">
                                    <img src="img/qzh_icon.png" alt="">
                                </div>
                            </div>
                        </transition>
                    </div>
                </div>

                <!-- 提示 -->
                <div class="hint clear" v-if="showHeadHint">
                    <div class="text fl">
                        温馨提示：兑换券全部金额须一次用完
                    </div>
                    <div class="close fr" >
                        <img src="img/close.png" alt="" @click="showHeadHint =false">
                    </div>
                </div>
                <!-- 签纸贺兑换金额 -->
                <div class="header clear">
                    <div class="logo fl">
                        <img src="img/qzh_logo.png" alt="">
                    </div>
                    <div class="text fl">
                        签纸贺兑换券：{{faceValue}}元
                    </div>
                </div>
                <!-- 选择卡区域 -->
                <div class="select-card-content clear">
                          <!-- 品牌选择 -->
                        <ul class="brand-list fl">
                            <li class="item  " 
                                :class="item.checked ? 'checked' : ''" 
                                v-for="(item,index) in exchangeGoods" 
                                :key="index" 
                                @click="toggleBrand(item,index)"
                                >
                                <div class="box ">
                                    <div class=" logo ">
                                        <img :src="item.brandSrc" alt="">
                                    </div>
                                    <div class="brand-name ">
                                        <p>{{item.brandName}}</p>
                                    </div>
                                    <div class="number" v-show="item.brandNum > 0">
                                        {{item.brandNum}}
                                    </div>
                                </div>
                                 
                            </li>
                            <li class="footer-li">

                            </li>
                        </ul>
                        <!-- 品牌内容 -->
                        <div class="brand-content fr">
                            <div class="brand-title">
                                {{exchangeGoods[checkedbrandIndex].brandName}}
                            </div>

                            
                            <div class="card-select" v-for="(item,index) in exchangeGoods[checkedbrandIndex].goodsList" :key="index">
                                <div class="fixed-value card-item "
                                     :class="Number(exchangeAmount) < Number(item.facePrice) ? 'disabled' :''" 
                                     v-if="item.facePriceType == 1 || item.facePriceType == 3"
                                     
                                     >
                                    <div class="card-name">
                                        {{item.facePrice}}元电子卡
                                    </div>
                                    <div class="counter">
                                        <div class="sub" v-show="item.goodsNum > 0" @click="subGood(item)">
                                            <img src="img/sub.png" alt="">
                                        </div>
                                        <div class="number" v-show="item.goodsNum > 0">
                                            {{item.goodsNum}}
                                        </div>
                                        <div class="add">
                                            <img src="img/add_activate.png" alt=""
                                                @click="addGood($event,item)"
                                                v-if="Number(exchangeAmount) >= Number(item.facePrice)"
                                             >
                                            <img src="img/add_disabled.png" alt="" v-else >
                                        </div>
                                    </div>
                                </div>

                                <div class="custom-value" v-else>
                                    <div class="top">
                                        <div class="card-item"
                                            :class="Number(exchangeAmount) < Number(item.facePrice) ? 'disabled' :''" 
                                        >
                                            <div class="card-name">
                                                自定义面值（元）
                                            </div>
                                            <div class="counter">
                                                <div class="sub" v-show="item.goodsNum > 0" @click="subGood(item)">
                                                    <img src="img/sub.png" alt="">
                                                </div>
                                                <div class="number" v-show="item.goodsNum > 0">
                                                    {{item.goodsNum}}
                                                </div>
                                                <div class="add">
                                                    <img src="img/add_activate.png" alt=""
                                                        @click="addGood($event,item)"
                                                        v-if="Number(exchangeAmount) >= Number(item.facePrice)"
                                                    >
                                                    <img src="img/add_disabled.png" alt="" v-else >
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <img src="img/close-gray.png" alt="" 
                                        v-show="item.facePrice.length > 0 && !item.disabled"
                                        @click="item.facePrice = '' "
                                        >
                                        <input type="number" 
                                        pattern="[0-9]*" 
                                        placeholder="请输入1-1000整数" 
                                        oninput="if(value.length == 1){value=value.replace(/[^1-9]/g,'')}else{value=value.replace(/\D/g,'')};if(value>1000)value=1000;"
                                        v-model="item.facePrice"
                                        :disabled="item.disabled"
                                        @focus="getFocus"
                                        >
                                    </div>

                                </div>  

                            </div>
                         
                        </div>
                  

                </div>

                <div class="shade" v-show="showTotalCart" @click="showTotalCart=false"></div>
                <div class="footer " :class="showTotalCart ? 'footer-unfold': ''">
                    <!-- 提示 -->
                    <div class="hint">
                        您还有{{exchangeAmount}}元可兑换
                    </div>
                    <!-- 底部选择菜单 -->
                    <div class="select-menu">
                        <div class="title-menu clear">
                            <div class="title fl">
                                兑换详情
                            </div>
                            <div class="fr clear btn" @click="emptyOrder">
                                <div class="img fl">
                                    <img src="img/delect.png" alt="">
                                </div>
                                <div class="text">
                                    清空兑换夹
                                </div>
                            </div>
                        </div>

                        <ul class="card-list">
                            <li class="card-item" v-for="(item,index) in totalSelectData" :key="index">
                                <div class="logo" >
                                    <img :src="item.pic" alt="" id="cart">
                                </div>
                                <div class="name">
                                    {{getCustomName(item)}}
                                </div>
                                <div class="counter">
                                    <div class="img sub" @click="subCartGood(item,index)">
                                        <img src="img/sub.png" alt="">
                                    </div>
                                    <div class="number">
                                        {{item.goodsNum}}
                                    </div>
                                    <div class="img add"  >
                                       
                                        <img src="img/add_activate.png" alt=""
                                            @click="addCartGood(item,index)"
                                            v-if="Number(exchangeAmount) >= Number(item.facePrice)"
                                        >
                                        <img src="img/add_disabled.png" alt="" v-else >
                                    </div>
                                </div>
                            </li>
                        </ul>
                        


                    </div>
                    <!-- 底部菜单 -->
                    <div class="footer-menu">
                        <div class="left">
                            <img src="img/qzh_icon.png" alt="" @click="showTotalCartList">
                            <div class="select-number" v-show="totalSelectNum > 0">
                                {{totalSelectNum}}
                            </div>
                        </div>
                        <div class="center">
                            已选中：¥ {{faceValue - exchangeAmount}}元
                        </div>
                        <div class="right">
                            <input type="button" value="确定" :disabled="exchangeAmount != 0" @click="confirmOrder">
                        </div>
    
                    </div>
                </div>
               

            </div>    
            
           
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el:"#exchange_page",
            data:{
                showHeadHint:true,              //顶部提示是否显示
                showTotalCart:false,                //蒙版和购物车列表是否显示
                checkedbrandIndex:0,            //选择的是品牌的index
                faceValue:"1000",                //提示价格
                exchangeAmount:"1000",           //兑换券的能兑换的面值
                exchangeGoods: [{               //品牌数据
                        "goodsList": [
                        {
                            "goodsId": "1080001722",
                            "facePrice": "1000",
                            "facePriceType": "1",
                            "pic": "http://api.zihexin.net/appimages/ecard/1080001722_94389.png",
                            "brandId": "2",
                            "goodsName": "京东电子卡1000元"
                        },{
                            "goodsId": "1080001722",
                            "facePrice": "500",
                            "facePriceType": "1",
                            "pic": "http://api.zihexin.net/appimages/ecard/1080001722_94389.png",
                            "brandId": "2",
                            "goodsName": "京东电子卡500元"
                        }, {
                            "goodsId": "1080002034",
                            "facePrice": "200",
                            "facePriceType": "1",
                            "pic": "http://api.zihexin.net/appimages/ecard/1080001706_70829.png",
                            "brandId": "2",
                            "goodsName": "京东电子卡200元"
                        }, {
                            "goodsId": "1080002033",
                            "facePrice": "100",
                            "facePriceType": "1",
                            "pic": "http://api.zihexin.net/appimages/ecard/1080001706_70829.png",
                            "brandId": "2",
                            "goodsName": "京东电子卡100元"
                        }],
                        "brandName": "京东京东京东",
                        "brandId": "2",
                        "brandSrc": "http://api.zihexin.net/appimages/ecard/1080001706_70829.png"
                    }, {
                        "goodsList": [{
                            "goodsId": "1080000641",
                            "facePrice": "500",
                            "facePriceType": "1",
                            "pic": "http://api.zihexin.net/appimages/ecard/1080000641_98808.png",
                            "brandId": "37",
                            "goodsName": "美团电子卡500元"
                        }, {
                            "goodsId": "1080000639",
                            "facePrice": "200",
                            "facePriceType": "1",
                            "pic": "http://api.zihexin.net/appimages/ecard/1080000639_28077.png",
                            "brandId": "37",
                            "goodsName": "美团电子卡200元"
                        }, {
                            "goodsId": "1080000637",
                            "facePrice": "100",
                            "facePriceType": "1",
                            "pic": "http://api.zihexin.net/appimages/ecard/1080000637_54822.png",
                            "brandId": "37",
                            "goodsName": "美团电子卡100元"
                        }, {
                            "goodsId": "1080002004",
                            "facePrice": "10",
                            "facePriceType": "1",
                            "pic": "http://api.zihexin.net/appimages/ecard/1080002004_49147.png",
                            "brandId": "37",
                            "goodsName": "美团电子卡10元"
                        }, {
                            "goodsId": "1080002050",
                            "facePrice": "0",
                            "facePriceType": "2",
                            "pic": "http://api.zihexin.net/appimages/ecard/1080002050_02572.png",
                            "brandId": "37",
                            "goodsName": "美团电子卡"
                        }],
                        "brandName": "美团",
                        "brandId": "37",
                        "brandSrc": "http://api.zihexin.net/appimages/ecard/1080001706_70829.png"
                    }, {
                        "goodsList": [{
                            "goodsId": "1080005006",
                            "facePrice": "500",
                            "facePriceType": "1",
                            "pic": "http://api.zihexin.net/appimages/ecard/1080005006_55813.png",
                            "brandId": "8",
                            "goodsName": "星礼卡500元"
                        }],
                        "brandName": "星巴克",
                        "brandId": "8",
                        "brandSrc": "http://api.zihexin.net/appimages/ecard/1080001706_70829.png"
                    }, {
                        "goodsList": [{
                            "goodsId": "1080005006",
                            "facePrice": "500",
                            "facePriceType": "1",
                            "pic": "http://api.zihexin.net/appimages/ecard/1080005006_55813.png",
                            "brandId": "8",
                            "goodsName": "App Store500元"
                        }],
                        "brandName": "App Store 充值卡",
                        "brandId": "10",
                        "brandSrc": "http://api.zihexin.net/appimages/ecard/1080001706_70829.png"
                    }
                    
                    ],
                    totalSelectData:{},
                    totalSelectNum:0,
					balls: [ //小球 设为3个 影响加购物车速度
						{
							show: false
						},
						{
							show: false
						},
						{
							show: false
						},
					],
					dropBalls: [],
              
              
                
            },
            watch: {
               
            },
            computed: {
               
            },
            created(){
                 //初始化数据
              this.initializeData();

            },
            mounted(){
               
            },
            methods:{
                //初始化
                initializeData(){
                    
                    for(var i=0;i<this.exchangeGoods.length;i++){
                        if(i == this.checkedbrandIndex){
                            this.exchangeGoods[i].checked = true;
                        }else{
                            this.exchangeGoods[i].checked = false;
                        }
                        this.exchangeGoods[i].brandNum = 0;
                         for(var y=0;y<this.exchangeGoods[i].goodsList.length;y++){
                            this.exchangeGoods[i].goodsList[y].goodsNum = 0;
                            if(this.exchangeGoods[i].goodsList[y].facePriceType == 2){
                                this.exchangeGoods[i].goodsList[y].facePrice = "";
                                this.exchangeGoods[i].goodsList[y].disabled = false;
                            }
                         }

                    }

                    console.log(this.exchangeGoods)
                },
                //切换品牌
                toggleBrand(item,index){
                    for(var i=0;i<this.exchangeGoods.length;i++){
                        this.exchangeGoods[i].checked = false;
                    }
                    item.checked = true;
                    this.checkedbrandIndex = index;
                    this.exchangeGoods= Object.assign([],this.exchangeGoods)
                },
                //添加商品
                addGood(event,item){
                    
                    if(item.facePriceType == 2){
                        if(item.facePrice == ""){
                            $.toast("请输入自定义面值");
                            return
                        }
                        item.disabled = true;
                    }
                    item.goodsNum ++;
                    this.exchangeAmount -= Number(item.facePrice);
                    this.exchangeGoods[this.checkedbrandIndex].brandNum ++;
                    this.totalSelectNum ++;
                    var key = "id" + this.exchangeGoods[this.checkedbrandIndex].brandId +"_"+ item.goodsId +"_"+ item.facePriceType;
                    if(this.totalSelectData.hasOwnProperty(key)){
                        this.totalSelectData[key].goodsNum = item.goodsNum ;
                    }else{
                        this.totalSelectData[key] = item;
                        this.totalSelectData[key].brandId = this.exchangeGoods[this.checkedbrandIndex].brandId;
                        this.totalSelectData[key].brandName = this.exchangeGoods[this.checkedbrandIndex].brandName;
                        console.log(333,item)
                        // if(item.facePriceType == "2"){
                        //     this.totalSelectData[key].goodsName = this.totalSelectData[key].goodsName+ this.totalSelectData[key].facePrice + "元";
                        // }

                    }

                    this.drop(event.target);
                },
                //减去商品
                subGood(item){
                    
                    item.goodsNum --;
                    this.exchangeGoods[this.checkedbrandIndex].brandNum --;
                    this.exchangeAmount += Number(item.facePrice);
                    if(item.facePriceType == 2){
                        if(item.goodsNum == 0){
                            item.disabled = false;
                        }
                    }
                    this.totalSelectNum --;
                    var key = "id" + this.exchangeGoods[this.checkedbrandIndex].brandId +"_"+ item.goodsId +"_"+ item.facePriceType;
                    this.totalSelectData[key].goodsNum = item.goodsNum ;
                    if(item.goodsNum == 0){
                        delete this.totalSelectData[key]
                    }

                    this.exchangeGoods= Object.assign([],this.exchangeGoods);
                    
                },
                getCustomName(item){
                    if(item.facePriceType == "2"){
                        return item.goodsName+ item.facePrice + "元";
                    }else{
                        return item.goodsName
                    }
                },
                //显示购物车列表
                showTotalCartList(){
                    
                    if(!this.showTotalCart && this.totalSelectNum == 0){
                        return;
                    }
                    this.showTotalCart = !this.showTotalCart;
                    
                },
                //确定订单
                confirmOrder(){
                    if(this.showTotalCart){
                        //提交
                        var sendData={
                            exchangeGoods:[],
                            exchangeAmount:this.faceValue,
                        }

                        for(var k in this.totalSelectData){
                            var obj = {
                                "goodsId" : this.totalSelectData[k].goodsId,
                                "exchangeCount" : this.totalSelectData[k].goodsNum,
                                "facePrice" : this.totalSelectData[k].facePrice
                            }
                            sendData.exchangeGoods.push(obj);
                        }
                        console.log(sendData)
    

                    }else{
                        //展开
                        this.showTotalCart = true;
                    }
                },
                //清空兑换价
                emptyOrder(){
                    this.exchangeAmount = this.faceValue;
                    this.showTotalCart = false;
                    this.totalSelectData = {};
                    this.totalSelectNum = 0;
                    
                    for(var i=0;i<this.exchangeGoods.length;i++){
                        this.exchangeGoods[i].brandNum = 0;
                        for(var y=0;y<this.exchangeGoods[i].goodsList.length;y++ ){
                            this.exchangeGoods[i].goodsList[y].goodsNum = 0;
                            if(this.exchangeGoods[i].goodsList[y].facePriceType == 2){
                                this.exchangeGoods[i].goodsList[y].disabled = false;
                            }
                        }
                    }
        
                },
                //购物车里减法
                subCartGood(item,index){
                    item.goodsNum --;
                    this.totalSelectNum -- ;
                    
                    if(item.goodsNum == 0){
                        delete this.totalSelectData[index];
                    }

                    if(this.totalSelectNum == 0){
                        this.showTotalCart =false;
                    }

                    for(var i=0;i<this.exchangeGoods.length;i++){
                        if(this.exchangeGoods[i].brandId == item.brandId){
                            this.exchangeGoods[i].brandNum --;
                        }

                        for(var y=0;y<this.exchangeGoods[i].goodsList.length;y++ ){
                            
                            if(this.exchangeGoods[i].goodsList[y].goodsId == item.goodsId){
                                this.exchangeGoods[i].goodsList[y].goodsNum = item.goodsNum  ;
                            }
                        }
                    }
                    this.exchangeAmount += Number(item.facePrice);
                    this.totalSelectData= Object.assign({},this.totalSelectData);
                    
                },
                //购物车增加
                addCartGood(item,index){
                    item.goodsNum ++;
                    this.totalSelectNum ++ ;
                    for(var i=0;i<this.exchangeGoods.length;i++){
                        if(this.exchangeGoods[i].brandId == item.brandId){
                            this.exchangeGoods[i].brandNum ++;
                        }

                        for(var y=0;y<this.exchangeGoods[i].goodsList.length;y++ ){
                            if(this.exchangeGoods[i].goodsList[y].goodsId == item.goodsId){
                                this.exchangeGoods[i].goodsList[y].goodsNum =item.goodsNum;
                            }
                        }
                    }
                    this.exchangeAmount -= Number(item.facePrice);
                    this.totalSelectData= Object.assign({},this.totalSelectData);

                },
                getFocus() {
                    $("input,textarea").on("blur", function() {
                        window.scroll(0, 0);
                    });
                },
                drop(el) { //抛物
						for(let i = 0; i < this.balls.length; i++) {
							let ball = this.balls[i];
							if(!ball.show) {
								ball.show = true;
								ball.el = el;
								this.dropBalls.push(ball);
								return;
							}
						}
					},
					beforeDrop(el) { /* 购物车动画实现 */
                        let count = this.balls.length;
                        
						while(count--) {
							let ball = this.balls[count];
							if(ball.show) {
								let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
                        
								let x =   rect.left - $("#cart").position().left -$("#cart").width()/2 ;
                                let y =  -(window.innerHeight - rect.top -$("#cart").width())//-(window.innerHeight - rect.top ); //获取y
								el.style.display = '';
								el.style.webkitTransform = 'translateY(' + y + 'px)'; //translateY
								el.style.transform = 'translateY(' + y + 'px)';
								let inner = el.getElementsByClassName('inner-hook')[0];
								inner.style.webkitTransform = 'translateX(' + x + 'px)';
								inner.style.transform = 'translateX(' + x + 'px)';
							}
						}
					},
					dropping(el, done) { /*重置购物车数量  样式重置*/
						let rf = el.offsetHeight;
						el.style.webkitTransform = 'translate3d(0,0,0)';
						el.style.transform = 'translate3d(0,0,0)';
						let inner = el.getElementsByClassName('inner-hook')[0];
						inner.style.webkitTransform = 'translate3d(0,0,0)';
						inner.style.transform = 'translate3d(0,0,0)';
						el.addEventListener('transitionend', done);
					},
					afterDrop(el) { /*初始化购物车*/
						let ball = this.dropBalls.shift();
						if(ball) {
							ball.show = false;
							el.style.display = 'none';
						}
					}   
            },
            
        })

        /* jq */
        $(function(){
            //返回
            $("#back").on("click", function () {
                window.history.go(-1);
            });
          
        })
    </script>
</html>

